<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Category</title>
</head>
<!--<script src="static/js/vue.js"></script>-->
<!--&lt;!&ndash; 引入样式 &ndash;&gt;-->
<!--<link rel="stylesheet" href="static/css/theme/index.css">-->
<!--<script src="static/js/index.js"></script>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<script src="js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="css/theme/index.css">
<!-- 引入组件库 -->
<script src="js/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>
<style>

</style>
<body>
<div id="app">
    <el-row>
        <el-button type="info" icon="el-icon-news" @click="dialogFormVisible = true" circle></el-button>

    </el-row>
    <el-dialog @close="closeDialog" :visible.sync="dialogFormVisible">
        <el-form  >
            <el-form-item label="类别" :label-width="formLabelWidth" >
                <el-input v-model="form.categoryName"></el-input>
            </el-form-item>
            <el-form-item label="父类别" :label-width="formLabelWidth">
                <el-cascader
                        v-model="form.categoryParentName"
                        @change="handleChange"
                        :options="options"
                        :props="{ checkStrictly: true }"
                        clearable></el-cascader>

            </el-form-item>
            <el-form-item label="详情" :label-width="formLabelWidth">
                <el-input v-model="form.detail"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" >取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
    <template>
        <div>
            <el-table
                    :data="tableData"
                    style="width: 900px;margin-bottom: 20px;"
                    row-key="id"
                    border
                    lazy
                    :load="getChild"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="categoryName"
                        label="类别"
                        sortable
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="categoryParentName"
                        label="父类别"
                        sortable
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="detail"
                        label="详情"
                        sortable
                        width="200">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editCategory(scope.row)" icon="el-icon-edit">编辑</el-button>
                        <el-button type="danger" size="small" @click="delCategory(scope.row)" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>


        </div>
    </template>
</div>
</body>
</html>
<script>
    let id = 0;
    var Main = {
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                form: {
                    id:"",
                    categoryName: '',
                    categoryParentName: '',
                    detail: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                options:[]

            }
        },
        methods: {
            load(tree, treeNode, resolve) {
                setTimeout(() => {
                    resolve([
                        {
                            id: 31,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }, {
                            id: 32,
                            date: '2016-05-01',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1519 弄'
                        }
                    ])
                }, 1000)
            },
            getChild(tree, treeNode, resolve) {
                _this = this
                var id = tree.id;
                axios.get("/Category/getCategoriesById/" + id).then(function (data) {
                    var childCategories = data.data;
                    if (childCategories) {
                        for (var i = 0; i < childCategories.length; i++) {
                            childCategories[i].categoryParentName = childCategories[i].parent.categoryName;
                            childCategories[i].hasChildren = true
                        }
                    } else {
                        childCategories = null
                    }
                    resolve(childCategories)
                }).catch(function (reason) {
                })
            },
            submitForm : function () {
                _this = this
                this.$confirm('此操作将保存修改, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var params = new URLSearchParams();
                    params.append("id",_this.form.id)
                    params.append("categoryName", _this.form.categoryName)
                    var parentId = _this.form.categoryParentName;

                    params.append("parentId",parentId[parentId.length-1])
                    params.append("detail",_this.form.detail)
                    axios.post("/Category/saveCategory", params).then(function () {
                        _this.dialogFormVisible = false
                        window.location.reload();
                    }).catch(function (reason) {
                    })
                    this.$message({
                        type: 'success',
                        message: '保存成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消保存'
                    });
                });
            },
            editCategory(row) {
                _this = this;
                _this.form.id = row.id;
                _this.form.categoryName = row.categoryName;
                _this.form.categoryParentId = row.parentId
                if (row.parentId == null) {
                    _this.form.categoryParentName = -1;
                } else {
                    _this.form.categoryParentName = row.parentId
                }
                _this.form.detail = row.detail
                _this.dialogFormVisible = true
            },
            handleChange(value) {
                _this = this;
                // alert(value)
                console.log("****" + _this.form.categoryParentName)
                var parentId = _this.form.categoryParentName;
                _this.form.categoryParentId = parentId[parentId.length-1]

            },
            delCategory(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var params = new URLSearchParams();
                    params.append("id" , row.id)
                    // alert(params)
                    axios.post("/Category/delCategory",params).then(function (data) {
                        window.location.reload();
                    }).catch(function (reason) {
                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            closeDialog() {
                _this = this;
                _this.form.categoryParentName = null;
                _this.form.categoryParentId = null;
                _this.form.detail = null;
                _this.form.categoryName = null;
            }
        }, beforeCreate: function () {
            _this = this
            axios.get("/Category/getTopCategories").then(function (data) {
                _this.tableData = data.data
                for (var i = 0; i < _this.tableData.length; i++) {
                    _this.tableData[i].categoryParentName = "顶级类别"
                    _this.tableData[i].hasChildren = true
                }
            }).catch(function (reason) {
            })
            axios.get("/Category/getAllCategories").then(function (data) {
                _this.options = data.data
            }).catch(function (reason) {
            })
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>